import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Modal, Steps, Row, Col, Tabs } from 'antd';
import ModuleList from './components/ModuleList'
import ModuleEdit from './components/ModuleEdit'

const { Step } = Steps;
class ViewPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
        }
    }
    switchModal = (visible) => {
        this.setState({ visible });
    };
    render() {
        return (
            <PageHeaderWrapper title={false}>
                <Row gutter={[16, 16]}>
                    <Col span={24}>
                        <Card>
                            <Steps current={4}>
                                <Step title="添加" description="添加业务接口" />
                                <Step title="配置" subTitle="Left 00:00:08" description="配置业务服务" />
                                <Step title="下载" description="下载注册文件" />
                                <Step title="导入" description="导入注册表" />
                                <Step title="完成" description="Ok！" />
                            </Steps>
                        </Card>
                    </Col>
                    <Col span={24}>
                        <Card>
                            <ModuleList switchModal={(para) => this.switchModal(para)} />
                        </Card>
                    </Col>
                </Row>


                <Modal
                    title={<b>应用添加</b>}
                    width="50%"
                    visible={this.state.visible}
                    onOk={() => this.switchModal(false)}
                    onCancel={() => this.switchModal(false)}
                    footer={null}
                    destroyOnClose={true}>
                    <ModuleEdit switchModal={(para) => this.switchModal(para)} />
                </Modal>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;